<style>
    .picbtn {
        width: 80px;
        height: 80px;
        background-size: cover;
        border: solid 1px #999;
        float: left;
        margin-left: 5px;
    }
    .del {
        width: 15px;
        height: 15px;
        border: solid 1px #999;
        text-align: center;
        line-height: 15px;
        color: #ff7800;
        position: absolute;
        z-index: 9;
        cursor: pointer;
        margin-left: 62px;
        margin-top: 2px;
    }
</style>
<br/><br/><br/><br/>
<form class="layui-form" action="{:url('categorySave')}" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">类名</label>
            <div class="layui-input-inline">
                <input type="text"  name="name"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">上级分类</label>
            <div class="layui-input-inline">
                <select name="pid">
                    <option value="">无</option>
                    {foreach $tree as $key=>$vo}
                        <option value="{$vo['id']}">{$vo['name']}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" value="0"  name="sort"  class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">跳转</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="输入后会跳转至输入的地址"  name="href"  class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-inline">
                <div style="background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>

    $(document).ready(function () {
        $(".del").click(function () {
            $(this).parent(".picbtn").css("background", "none");
            $(this).next("input").val("");
            $(this).prev("input").val("1");
        });

        $("input[type='file']").on('change', function (e) {
            $(this).prev(".del").prev("input").val(0);
            var img = $(this).parent('.picbtn');
            var file = e.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    img.css({"background": "url(" + e.target.result + ")", "background-size": "cover"});
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>

